<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outer {
      width: 300px;
      height: 300px;
      background-color: black;
    }

    .middle {
      width: 200px;
      height: 200px;
      background-color: green;
    }

    .inner {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

  <div class="outer">
    <div class="middle">
      <div class="inner">

      </div>
    </div>
  </div>

<body>
  <!-- addEventListener(eventType, handle, capture) -->

  <script>
    var oOuter = document.getElementsByClassName('outer')[0]
    var oMiddle = document.getElementsByClassName('middle')[0]
    var oInner = document.getElementsByClassName('inner')[0]

    /**
     * DOM4 标准中 -> addEventListener(eventType, handle, capture || options{})
     */

     // capture: true
   

    oOuter.addEventListener('click', function () {
      console.log('outer')
    }, {
      capture: true, //默认 false
      // 只调用一次事件的处理函数
      // 会移除当前的监听器
      // 事件是不需要绑定，浏览器固然存在，冒泡也是默认的行为
      once: true 
    })

    oMiddle.addEventListener('click', function () {
      console.log('middle')
    }, {
      // capture: true
      // 标准默认值是false
      // Unable to preventDafault inside passive event listener invocation
      // 永远不调用阻止默认行为的方法 preventDefault
      passive: false
    })

    oInner.addEventListener('click', function () {
      console.log('inner')
    }, {
      capture: true,
      once: true
    })


    window.addEventListener('touchstart', function (e) {
      console.log(e.cancelable) //事件是否能被取消 
      // touchstart 的默认行为 -> scroll 滚动
      // chrome firfox浏览器  window标签 -> touchstart -> passive -> true
      // e.preventDefault()

      /**
       * 1. 处理器程序执行 console.log(123)
       *  非常大性能问题 -> 等待的时间 浪费 -> 导致了scroll的卡顿
       * 2. 执行默认行为 scroll
       * */
      console.log(123)
      console.log(e.defaultPrevented)
    }, {

      // 设置 passive 会提高滚屏性能的原因
      // 改为 true 阻止默认行为的方法不会调用 preventDafault 不会调用
      // 两个线程去处理滚动的问题
      // 1. 处理处理器的执行
      // 2. 执行默认行为
      passive: false
    })
  </script>
</body>
</html>